<%@page contentType="text/html" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>

<!DOCTYPE html >
<html itemscope itemtype="http://schema.org/WebPage">
    <head>
        <link rel='shortcut icon' type='image/x-icon' href='/favicon.ico' />      
        <link rel="publisher" href="http://google.com/+RentpadPhi" />  
        
        <title>Apartments, Condos, Houses and Rooms For Rent | Rentpad.com.ph</title>
        
        <META HTTP-EQUIV="CACHE-CONTROL" CONTENT="NO-CACHE">
        <meta name="viewport" content="width=device-width, initial-scale=1"> 
        
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <meta name="description" content="Find an apartment, condo, house or room for rent for the long term or short term in Makati, Taguig, Manila, Mandaluyong, Pasig, Quezon City, Cebu, etc." />
        <meta name="keywords" content="apartment for rent, condo for rent, condominium for rent, house for rent, room for rent"/>

        <meta property="og:type" content="website"/>
        <meta property="og:site_name" content="Rentpad.com.ph"/>
        <meta property="og:url" content="http://rentpad.com.ph"/>
        <meta property="og:title" content="Apartments, Condos, Houses and Rooms For Rent | Rentpad.com.ph"/>
        <meta property="og:description" content="Find an apartment, condo, house or room for rent for the long term or short term in Makati, Taguig, Manila, Mandaluyong, Pasig, Quezon City, Cebu, etc." />
        <meta property="og:image" content="${model.props.appPath}/img/rentpad-logo-1.png"/>

        <meta name="twitter:card" content="summary"/>
        <meta name="twitter:site" value="@rentpadph"/>
        <meta name="twitter:url" content="http://rentpad.com.ph"/>
        <meta name="twitter:title" content="Apartments, Condos, Houses and Rooms For Rent | Rentpad.com.ph"/>
        <meta name="twitter:description" content="Find an apartment, condo, house or room for rent for rent for the long term or short term in Makati, Taguig, Manila, Mandaluyong, Pasig, Quezon City, Cebu, etc."/>
        <meta name="twitter:image" content="${model.props.appPath}/img/rentpad-logo-1.png"/>

        <meta itemprop="name" content="Rentpad.com.ph"/>
        <meta itemprop="description" content="Find an apartment, condo, house or room for rent for the long term or short term in Makati, Taguig, Manila, Mandaluyong, Pasig, Quezon City, Cebu, etc."/>
        <meta itemprop="keywords" content="apartment for rent, condo for rent, condominium for rent, house for rent, studio apartment for rent, 1 bedroom apartment for rent, 2 bedroom apartment for rent, 3 bedroom apartment for rent, studio condo for rent, 1 bedroom condo for rent, 2 bedroom condo for rent, 3 bedroom condo for rent"/>
        <meta itemprop="image" content="${model.props.appPath}/img/rentpad-logo-1.png"/>
        
        <link rel="stylesheet" href="${model.props.appPath}/css/jquery_mobile/jquery.mobile-1.2.1.min.css" type="text/css"/>
        <script src="${model.props.appPath}/js/jquery/jquery-1.8.3.min.js"></script>
	<script src="${model.props.appPath}/js/jquery_mobile/jquery.mobile-1.2.1.min.js"></script>    
        
        <style>
            a {text-decoration:none;} 
            @font-face
            {
                font-family: avant;
                src: url('${model.props.appPath}/fonts/avangmi-webfont.ttf');
            }
            body  * {
                font-family: avant !important;
            }
        </style>

        <script>
            function switchMenu() {
                if ($('#menu').is(':visible')) {                    
                    $("#menu").hide();
                } 
                else {
                    $("#menu").show();
                }
            }
        </script>
        
        <script type="text/javascript">

            $(function() {
                $("#searchBtn").click( function() {
                        search();
                    }
                );
             });
            
            function search() {
                try {
                   var cityTitle = $("#cityTitle").val();
                    var leaseTerm = $("#leaseTerm").val();
                    cityTitle = cityTitle.replace(' ','-');
                    window.location = "${model.props.appPath}/" + leaseTerm + "/" + cityTitle;
                } catch (e) {
                    alert(e);
                }
            }

        </script>
        
        <script>
            (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
            (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
            m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
            })(window,document,'script','//www.google-analytics.com/analytics.js','ga');
            ga('create', 'UA-44197833-1', 'rentpad.com.ph');
            ga('send', 'pageview');
        </script>
    </head>

    <body>
        <div data-role="page" data-theme="d">
            <%@include file="header_mobile.jsp" %> 

            <div data-role="content">
                
                <h3 style="text-align: center; color: #666666; font-size: 17px;">Find your next home that suits you</h3>

                <form data-ajax="false">
                    <div data-role="fieldcontain">
                        <fieldset data-role="controlgroup" style="text-align:center;">
                           <select name="cityTitle" id="cityTitle" data-native-menu="false">
                                <option value="makati" data-placeholder="true" style="width: 100%;">Choose a City</option>
                                    <option value="makati">Makati</option>
                                    <option value="taguig">Taguig</option>
                                    <option value="mandaluyong">Mandaluyong</option>
                                    <option value="pasig">Pasig</option>
                                    <option value="quezon city">Quezon City</option>
                                    <option value="manila">Manila</option>
                                    <option value="pasay">Pasay</option>
                                    <option value="paranaque">Paranaque</option>
                                    <option value="muntinlupa">Muntinlupa</option>
                                    <option value="cebu">Cebu</option>
<!--                                <optgroup label=Taguig>
                                    <option value="">All</option>
                                    <option value="">The Fort</option>
                                    <option value="">Mckinley Hill</option>
                                </optgroup>-->
                            </select>
                            
                            <select name="leaseTerm" id="leaseTerm" data-native-menu="false"    >
                                <option value="long-term-rentals" data-placeholder="true">Choose Rental Term</option>
                                <option value="long-term-rentals">Long Term (6 months or more)</option>
                                <option value="short-term-rentals">Short Term (Few days or weeks)</option>
                            </select>

                        </fieldset>
                        <br>
                        <div style="text-align:center;">
                            <a data-role="button" data-theme="b" id="searchBtn">Search</a>
                        </div>
                    </div>
                </form> 
            </div> 
                
            <div data-role="header" data-theme="c">
                <p style="color: #666666; font-size: 20px; text-align: center;">Featured Properties</p>   
            </div>
            
            <div data-role="content">

                <div style="text-align: center; padding-bottom: 30px;">
 
                    <ul data-role="listview" data-theme="d">                       
                        <c:forEach items="${model.listings}" var="listing">
                            <li itemprop="offers" itemscope itemtype="http://schema.org/Offer" style="height: 90px;">
                                
                                <c:choose>
                                    <c:when test="${listing.leaseShortTerm}">
                                        <a href="${model.props.appPath}/short-term-rentals/${fn:toLowerCase(listing.city)}/${fn:replace(listing.displayTitle, ' ', '-')}/${listing.id}" title="${listing.title} for rent in ${listing.city}" data-ajax="false">
                                    </c:when>
                                    <c:otherwise>
                                        <a href="${model.props.appPath}/long-term-rentals/${fn:toLowerCase(listing.city)}/${fn:replace(listing.displayTitle, ' ', '-')}/${listing.id}" title="${listing.title} for rent in ${listing.city}" data-ajax="false">
                                    </c:otherwise>
                                </c:choose>
                                    
                                <img itemprop="image" src="${model.props.rootPath}/uploads/img/002-${listing.primaryPhoto.filename}" style="min-height: 90px; min-width: 120px;"/>
                                
                                <span itemprop="itemOffered" itemscope itemtype="http://schema.org/Product">
                                    <p style="display: block; text-align: left; padding-bottom: 2px; margin-left: 30px; font-size: 14px">
                                        <b itemprop="name">${listing.title}</b>
                                    </p>                                    
                                </span>
                                    
                                    <c:choose>
                                        <c:when test="${listing.leaseLongTerm}">
                                            <meta itemprop="priceCurrency" content="PHP" />
                                            <p  style="text-align: left; margin-left: 30px;">
                                                <span itemprop="price">&#8369; ${listing.longMonthRate}</span>
                                                / Month
                                            </p> 
                                        </c:when>
                                        <c:otherwise>
                                            <meta itemprop="priceCurrency" content="PHP" />
                                            <p itemprop="price" style="text-align: left; margin-left: 30px;">&#8369; ${listing.shortDayRate}</p> / Night
                                        </c:otherwise>
                                    </c:choose>
                                
                                    <c:if test="${listing.community != null}">
                                        <p style="text-align: left; margin-left: 30px;">${listing.community.title}</p>
                                        <p style="text-align: left; margin-left: 30px; color: #339900;">${listing.city}</p>  
                                    </c:if>   

                                    <c:if test="${listing.community == null}">
                                         <p style="text-align: left; margin-left: 30px; color: #339900;">${listing.city}</p>
                                    </c:if>
                                </a>
                            </li>
                        </c:forEach>
                    </ul>
                </div>

                <table border="0" align="center" style="width: 50%; padding-top: 10px; padding-bottom: 10px;">
                    <tr>
                        <td align="middle">
                            <a href="https://www.facebook.com/rentpad">
                                <img src="${model.props.appPath}/img/social-icons-30.png" style="border: 0px solid black; display: block; height: 50px; margin: 0 auto;"/>
                            </a>
                        </td>
                        <td align="middle">
                            <a href="https://twitter.com/rentpadph">
                                <img src="${model.props.appPath}/img/social-icons-29.png" style="border: 0px solid black; display: block; width: 50px; height: 50px; margin: 0 auto;"/>
                            </a>
                        </td>
                        <td align="middle">
                            <a href="http://google.com/+RentpadPhi">
                                <img src="${model.props.appPath}/img/social-icons-33.png" style="margin-left: 0px; border: 0px solid black; display: block; width: 52px; height: 52px; margin: 0 auto;"/>
                            </a>
                        </td>
                    </tr>
                </table>
            </div>

            <div data-role="footer">
                <%@include file="footer_mobile.jsp" %>      
            </div>
        </div>
    </body>
</html>
